<template>
  <view class="uni-picker">
    <div
      class="text"
      :class="{ placeholder: value === placeholder || value === '' }"
      :style="{ fontSize: fontSize, textAlign: textAlign }"
      @tap="openPicker"
    >
      {{ value ? value : placeholder }}
    </div>
    <uni-transition
      :mode-class="['fade']"
      :styles="maskClass"
      :show="mask_show"
      @tip="closeMask"
    />
    <uni-transition
      :duration="500"
      :mode-class="['fade', 'slide-bottom']"
      :styles="transfromClass"
      :show="mask_show"
      @tap="closeMask"
    >
      <view
        class="game-picker-container"
        @click.stop=""
      >
        <view class="picker-title">
          <view
            class="btn"
            @click="closeMask"
          >
            取消
          </view>
          <view class="title" />
          <view
            class="btn green"
            @click="changePicker"
          >
            确定
          </view>
        </view>
        <picker-view
          :indicator-style="indicatorStyle"
          class="picker-box"
          :value="select_value"
          @change="toogerPicker"
        >
          <picker-view-column
            v-for="(item,index) in level"
            :key="index"
          >
            <view
              v-for="(item1, index1) in list[index]"
              :key="index1"
              class="picker-item"
            >
              {{ item1.name?item1.name:item1 }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-transition>
  </view>
</template>

<script>

import uniTransition from "./UniTransition";
export default {
	name: "SaasPicker",
	components: {
		uniTransition,
	},
	props: {
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false,
		},
		// 数据源
		datas: {
			type: Array,
			default: [],
		},
		// 几级分类
		level: {
			type: Number,
			default: 1,
		},
		placeholder: {
			type: String,
			default: "请选择分类",
		},
		title: {
			type: String,
			default: "",
		},
		tip: {
			type: String,
			default: "",
		},
		textAlign: {
			type: String,
			default: "left",
		},
		// 因为动态绑定问题不兼容upx 以下值使用rpx  详情见https://www.jianshu.com/p/97dc7c4a5ebf
		fontSize: {
			type: String,
			default: "30rpx",
		},
		defaultValue:{
			type:String,
			default:""
		}
	},
	data(){
		return{
			mask_show:false,
			select_value:[0,0],
			list:[],
			value:""
		};
	},
	computed: {
		indicatorStyle() {
			return `height: ${Math.round(
				uni.getSystemInfoSync().screenWidth / (750 / 80)
			)}px;`;
		},
		maskClass() {
			return {
				position: "fixed",
				bottom: 0,
				top: 0,
				left: 0,
				right: 0,
				"z-index": 9,
				"background-color": "rgba(0, 0, 0, 0.4)",
			};
		},
		transfromClass() {
			return {
				position: "fixed",
				bottom: 0,
				top: 0,
				left: 0,
				right: 0,
				"z-index": 999,
				/* #ifndef APP-NVUE */
				display: "flex",
				/* #endif */
				"justify-content": "center",
				"align-items": "flex-end",
			};
		},
	},
	beforeMount(){
		if(this.defaultValue){
			this.value = this.defaultValue;
		}
		let obj = this.datas;
		for(let i= 0;i<this.level;i++){
			this.list.push(obj);
			obj = obj[0].list;
		}
	},
	methods: {
		openPicker(){
			if(!this.disabled){
				this.mask_show = true;
			}
		},
		closeMask() {
			this.mask_show = false;
		},
		toogerPicker(e){
			this.select_value = e.detail.value;
			for(let i in e.detail.value){
				if(i == 0){
					continue;
				}
				this.list[i] = this.list[i-1][e.detail.value[i*1-1]].list;
			}
		},
		changePicker(){
			this.value = this.list[0][this.select_value[0]].name?this.list[0][this.select_value[0]].name:this.list[0][this.select_value[0]];
			for(let i in this.select_value){
				if(i == 0){
					continue;
				}
				this.value+="/"+(this.list[i][this.select_value[i]].name?this.list[i][this.select_value[i]].name:this.list[i][this.select_value[i]]);
			}
			this.$emit("change", this.value);
			this.closeMask();
		},
	}
};
</script>

<style lang="scss" scoped>
.game-picker-container {
  width: 100%;
  height: 560upx;
  background: rgba(255, 255, 255, 1);
  border-radius: 20upx 20upx 0 0;
  z-index: 99;

  .picker-title {
    height: 114upx;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      flex: 1;
      text-align: center;
      font-size: 36upx;
      font-weight: 500;
      color: rgba(21, 21, 26, 1);
    }

    .btn {
      height: 100%;
      padding: 0 40upx;
      box-sizing: border-box;
      line-height: 114upx;
      font-size: 28upx;
      color: rgba(147, 147, 164, 1);
    }

    .green {
      color: rgba(67, 221, 139, 1);
    }
  }

  .tips {
    text-align: center;
    font-size: 24upx;
    color: rgba(147, 147, 163, 1);
    line-height: 30upx;
  }

  .picker-box {
    width: 100%;
    height: 380upx;
    margin-top: 36upx;

    .picker-item {
      line-height: 80upx;
      text-align: center;
      font-size: 36upx;
      color: rgba(21, 21, 26, 1);
      font-family: PingFangSC, PingFangSC-Medium;
    }
  }
}
.placeholder {
  color: #9d9da3;
}
.text {
  //font-size: 30upx;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
  width: 100%;
  height: 100%;
}
</style>

